<template>
  <div >
    <div class="userinfo">
      <div class="avatar"><img src="@/assets/avatar.png"></div>
      <div class="name">{{ userInfo.username }}</div>
      <div class="exit" @click="logout">退出</div>
    </div>
    <ul class="list">
      <li> 
        <router-link to="/log">操作日志</router-link>
      </li>
      <li> 
        <router-link to="/role">权限管理</router-link>
      </li>
      <li> 
        <router-link to="/resetpwd">修改密码</router-link>
      </li>
    </ul>
  </div>
  <ToolBar :page="5"/>
</template>
<script setup>
import ToolBar from '@/components/ToolBar.vue'
import { ref, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router";
import service from '@/utils/request'
import { getUserInfo, removeCache } from '@/utils/cache'
import { hasPermission } from '@/utils/permission'

const router = useRouter();
const userInfo = ref({});

const logout = ()=>{
  ElMessageBox.confirm("你确定要退出系统么?","提醒",{
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(()=>{
    service.post("/api/user/logout").then(res=>{
      removeCache()
      router.replace("/login");
    })
  }).catch(()=>{})

}

onMounted(()=>{
  userInfo.value = getUserInfo()
})

</script>

<style scoped>
*{
  list-style:none;
}
.userinfo{
  height:130px;
  background:#409eff;
  font-size:25px;
  color:white;
}
.userinfo .avatar{
  float:left;
}
.userinfo .avatar img{
  width:70px;
  height:70px;
  border-radius:50%;
  margin:30px 0px 0px 30px;
}
.userinfo .name{
  padding:50px 0px 0px 20px;
  float:left;
}
.userinfo .exit{
  font-size:16px;
  padding:50px 20px 0px 0px;
  float:right;
}
ul.list{
  padding:10px;
}
ul.list li{
  padding:15px 20px;
  border-bottom:solid 1px #eeeeee;
}
a{
  text-decoration:none;
  color:#000;
}
</style>


